<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="element-ui-2.13.0/lib/theme-chalk/index.css">
    <script src="vue/vue-v2.6.10.js"></script>
    <script src="element-ui-2.13.0/lib/index.js"></script>
    <!--&lt;!&ndash; 引入 elementUI 样式 &ndash;&gt;-->
    <!--<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
    <!--&lt;!&ndash; 引入 vue 的js文件： elementUI基于Vue开发，必须在elementUI的js文件之前引入 &ndash;&gt;-->
    <!--<script src="https://cdn.jsdelivr.net/npm/vue"></script>-->
    <!--&lt;!&ndash; 引入elementUI 组件库 &ndash;&gt;-->
    <!--<script src="https://unpkg.com/element-ui/lib/index.js"></script>-->
    <style>
        .el-header, .el-footer {
            background-color: #B3C0D1;
            color: #333;
            text-align: center;
            line-height: 60px;
        }

        .el-aside {
            /*background-color: #D3DCE6;*/
            color: #333;
            text-align: center;
            /*line-height: 200px;*/
        }

        .el-main {
            background-color: #E9EEF3;
            color: #333;
            /*text-align: center;*/
            /*line-height: 160px;*/
        }

        body > .el-container {
            margin-bottom: 40px;
        }

        .el-container:nth-child(5) .el-aside,
        .el-container:nth-child(6) .el-aside {
            line-height: 260px;
        }

        .el-container:nth-child(7) .el-aside {
            line-height: 320px;
        }

        .el-dropdown-link {
            cursor: pointer;
            color: #409EFF;
        }
        .el-icon-arrow-down {
            font-size: 12px;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-aside width="200px">
            <el-col>
                <h5>默认颜色</h5>
                <!--菜单-->
                <el-menu
                        default-active="4"
                        class="el-menu-vertical-demo"
                        @open="handleOpen"
                        @close="handleClose">
                    <el-submenu index="1">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span>导航一</span>
                        </template>
                        <el-menu-item-group>
                            <template slot="title">分组一</template>
                            <el-menu-item index="1-1">选项1</el-menu-item>
                            <el-menu-item index="1-2">选项2</el-menu-item>
                        </el-menu-item-group>
                        <el-menu-item-group title="分组2">
                            <el-menu-item index="1-3">选项3</el-menu-item>
                        </el-menu-item-group>
                        <el-submenu index="1-4">
                            <template slot="title">选项4</template>
                            <el-menu-item index="1-4-1">选项1</el-menu-item>
                        </el-submenu>
                    </el-submenu>
                    <el-menu-item index="2">
                        <i class="el-icon-menu"></i>
                        <span slot="title">导航二</span>
                    </el-menu-item>
                    <el-menu-item index="3" disabled>
                        <i class="el-icon-document"></i>
                        <span slot="title">导航三</span>
                    </el-menu-item>
                    <el-menu-item index="4">
                        <i class="el-icon-setting"></i>
                        <span slot="title">导航四</span>
                    </el-menu-item>
                </el-menu>
            </el-col>
        </el-aside>
        <el-container>
            <el-header>Header</el-header>
            <el-main>
                <!--按钮-->
                <el-row>
                    <el-button icon="el-icon-search" circle @click=""></el-button>
                    <el-button type="primary" icon="el-icon-edit" circle></el-button>
                    <el-button type="success" icon="el-icon-check" circle></el-button>
                    <el-button type="info" icon="el-icon-message" circle></el-button>
                    <el-button type="warning" icon="el-icon-star-off" circle></el-button>
                    <el-button type="danger" icon="el-icon-delete" circle></el-button>
                </el-row>
                <!--提示框 -- 按钮-->
                <el-button :plain="true" @click="open1">消息</el-button>
                <el-button :plain="true" @click="open2">成功</el-button>
                <el-button :plain="true" @click="open3">警告</el-button>
                <el-button :plain="true" @click="open4">错误</el-button>

                <!--对话框（弹出框）-->
                <!-- Table -->
                <el-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>
                <!--弹出框 ：默认是隐藏状态
                    dialogTableVisible： true  显示
                    dialogTableVisible： false 隐藏
                -->
                <el-dialog title="标签页" :visible.sync="dialogTableVisible">
                    <el-tabs v-model="activeName" @tab-click="handleClick">
                        <el-tab-pane label="表格管理" name="first">
                            <!--
                                :data： 绑定表格对应的数据
                                stripe; 是否斑马纹显示
                            -->
                            <el-table :data="tableData" stripe style="width: 100%">
                                <!--
                                 type="index" ：类型为行的索引
                                 label： 表头

                                    注意：索引不是集合中的id
                                -->
                                <el-table-column
                                        type="index"
                                        label="序号"
                                        width="180">
                                </el-table-column>
                                <el-table-column
                                        prop="name"
                                        label="姓名"
                                        width="180">
                                </el-table-column>
                                <el-table-column
                                        prop="address"
                                        label="地址">
                                </el-table-column>
                                <el-table-column label="操作" align="center">
                                    <!--
                                        slot-scope：作用域插槽，可以获取表格数据
                                        scope：代表表格数据(tableData)
                                        可以通过scope.row来获取表格当前行数据，scope不是固定写法
                                        @click：绑定vue中的方法
                                    -->
                                    <template slot-scope="scope">
                                        <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
                                        <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <!--
                                size-change: 当改变 每页条数时执行
                                current-change： 改变页码时执行
                                current-page: 当前展示哪一页（当前页）
                                page-sizes：每页条数的 列表
                                page-size: 每页条数
                                layout: 布局
                                total: 总条数(需要从数据库中获取的)
                            -->
                            <el-pagination
                                    @size-change="handleSizeChange"
                                    @current-change="handleCurrentChange"
                                    :current-page="currentPage4"
                                    :page-sizes="[10, 20, 50, 100, 200, 300, 400]"
                                    :page-size="100"
                                    layout="total, sizes, prev , next,pager , jumper"
                                    :total="400">
                            </el-pagination>
                        </el-tab-pane>
                        <el-tab-pane label="表单管理" name="second">
                            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                                <!--prop ：引用校验规则 -->
                                <el-form-item label="活动名称" prop="name">
                                    <el-input v-model="ruleForm.name"></el-input>
                                </el-form-item>
                                <el-form-item label="活动区域" prop="region">
                                    <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
                                        <el-option label="区域一" value="shanghai"></el-option>
                                        <el-option label="区域二" value="beijing"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="活动时间" required>
                                    <el-col :span="11">
                                        <el-form-item prop="date1">
                                            <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
                                        </el-form-item>
                                    </el-col>
                                    <el-col class="line" :span="2">-</el-col>
                                    <el-col :span="11">
                                        <el-form-item prop="date2">
                                            <el-time-picker placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
                                        </el-form-item>
                                    </el-col>
                                </el-form-item>
                                <el-form-item label="即时配送" prop="delivery">
                                    <el-switch v-model="ruleForm.delivery"></el-switch>
                                </el-form-item>
                                <el-form-item label="活动性质" prop="type">
                                    <el-checkbox-group v-model="ruleForm.type">
                                        <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
                                        <el-checkbox label="地推活动" name="type"></el-checkbox>
                                        <el-checkbox label="线下主题活动" name="type"></el-checkbox>
                                        <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
                                    </el-checkbox-group>
                                </el-form-item>
                                <el-form-item label="特殊资源" prop="resource">
                                    <el-radio-group v-model="ruleForm.resource">
                                        <el-radio label="线上品牌商赞助"></el-radio>
                                        <el-radio label="线下场地免费"></el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item label="活动形式" prop="desc">
                                    <el-input type="textarea" v-model="ruleForm.desc"></el-input>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                                </el-form-item>
                            </el-form>
                        </el-tab-pane>
                        <el-tab-pane label="下拉菜单管理" name="third">
                            <!--@command="handleCommand" 点击菜单项触发的事件回调  -->
                            <el-dropdown @command="handleCommand">
                                <span class="el-dropdown-link">
                                     下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
                                </span>
                                <el-dropdown-menu slot="dropdown">
                                    <!--command : 选项对应的指令-->
                                    <el-dropdown-item command="a">黄金糕</el-dropdown-item>
                                    <el-dropdown-item command="b">狮子头</el-dropdown-item>
                                    <el-dropdown-item command="c">螺蛳粉</el-dropdown-item>
                                    <el-dropdown-item command="d" disabled>双皮奶</el-dropdown-item>
                                    <el-dropdown-item command="e" divided>蚵仔煎</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </el-tab-pane>
                        <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
                    </el-tabs>
                </el-dialog>
            </el-main>
            <el-footer>Footer</el-footer>
        </el-container>
    </el-container>
</div>

</body>
<script type="text/javascript">
    new Vue({
        el: "#app",
        data:{
            tableData:[
                {id:7, name: "王小虎",address: "上海市普陀区金沙江路 1519 弄"},
                {id:8, name: "王小丽",address: "上海市普陀区金沙江路 1520 弄"},
                {id:9, name: "王小丽",address: "上海市普陀区金沙江路 1520 弄"},
                {id:10, name: "王小丽",address: "上海市普陀区金沙江路 1520 弄"},
                {id:11, name: "王老七",address: "上海市普陀区金沙江路 1521 弄"}
            ],
            dialogTableVisible: false,
            activeName: 'third',
            currentPage4: 4,
            ruleForm: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            },
            rules: {//校验规则
                name: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                region: [
                    { required: true, message: '请选择活动区域', trigger: 'change' }
                ],
                date1: [
                    { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
                ],
                date2: [
                    { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
                ],
                type: [
                    { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
                ],
                resource: [
                    { required: true, message: '请选择活动资源', trigger: 'change' }
                ],
                desc: [
                    { required: true, message: '请填写活动形式', trigger: 'blur' }
                ]
            }
        },
        methods:{
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },

            open1() {
                // this.$message('这是一条消息提示');
                this.$message({
                    message: '这是一条消息提示',
                    type: 'info'
                });
            },
            open2() {
                this.$message({
                    message: '恭喜你，这是一条成功消息',
                    type: 'success'
                });
            },

            open3() {
                this.$message({
                    message: '警告哦，这是一条警告消息',
                    type: 'warning'
                });
            },

            open4() {
                // this.$message.error('错了哦，这是一条错误消息');
                this.$message({
                    message: '错了哦，这是一条错误消息',
                    type: 'error'
                });
            },
            handleClick(tab, event) {
                console.log(tab, event);
            },
            handleUpdate(row){
                alert(row.id);
            } ,
            handleDelete(row){
                alert(row.id);
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            },
            //提交表单（formName ）
            //formName = "ruleForm"
            submitForm(formName) {
                //this.$refs elementUI 定义的一个函数，用来获取对象
                //this.$refs[formName]: 根据formName获取表单对象
                // validate： 校验方法
                //valid:校验的结果（通过校验，返回true， 否则返回false）
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        alert('submit!');
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            //重置的方法
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            // 回调函数  command ： 对应选项的指令
            handleCommand(command) {
                this.$message('click on item ' + command);
            }
        }
    });
</script>
</html>